<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../dist/avalon.js"></script>
        <script>
            avalon.component('ms-list', {
                template: '<div><input type="checkbox" ms-for="el in @list" \n\
        data-duplex-changed="@change" ms-duplex="@selected" ms-attr="{value:el}"/></div>'
                , defaults: {
                    selected: [1, 2],
                    list: [1,2,3,4,5],
                    change:function(){
                        console.log('------')
                        console.log(this.selected)
                    }
                }
            })
            var vm = avalon.define({
                $id: 'test',
                list2: [7,6,5,4,3,2,1]
            })
            //
            //在全局作用域上使用了大量变量
        </script>
        <style>
            .selected{
                background:red;
            }
        </style>
    </head>
    <body ms-controller="test" >
    <ms-list></ms-list>
    <ms-list ms-widget="{list:@list2}"></ms-list>
</body>
</html>
